<template>
    <view class="content">
        <view class="title">
			出生年份
		</view>
        <picker-view v-if="visible" :indicator-style="indicatorStyle" :mask-style="maskStyle" :value="value" 
		@change="bindChange" indicator-class="picker-s" mask-class="mask">
            <picker-view-column>
               <view class="item" v-for="(item,index) in years" :key="index" :class="[index===curr?'select':'']">{{item}}年</view>
				
            </picker-view-column>
        </picker-view>
		<view class="btn-box">
			<view @click="jump(0)" class="btn-box">
				<bigBtn :btnBoxWidth="btnBoxWidthL" :btnBoxHeight="btnBoxHeightL" :btnColor="btnColorL" :btnImgSrc="btnImgSrcL"
					:btnText="btnTextL" :btnTextColor="btnTextColorL" :btnTextSize="btnTextSizeL" :btnImgWidth="btnImgWidthL" 
					:btnRadius="btnRadiusL">
				</bigBtn>
			</view>
			<view @click="jump(1)" class="btn-box">
				<bigBtn :btnBoxWidth="btnBoxWidthR" :btnBoxHeight="btnBoxHeightR" :btnColor="btnColorR" :btnImgSrc="btnImgSrcR"
					:btnText="btnTextR" :btnTextColor="btnTextColorR" :btnTextSize="btnTextSizeR" :btnImgWidth="btnImgWidthR" 
					:btnRadius="btnRadiusR">
				</bigBtn>
			</view>
		</view>
    </view>
</template>

<script>
	import bigBtn from '@/components/bigButton.vue';
    export default {
		components: {
			bigBtn
		},
        data () {
            const date = new Date()
            const years = []
            const year = date.getFullYear()
            const months = []
            const month = date.getMonth() + 1
            const days = []
            const day = date.getDate()

            for (let i = 1930; i <= date.getFullYear(); i++) {
                years.push(i)
            }

            for (let i = 1; i <= 12; i++) {
                months.push(i)
            }

            for (let i = 1; i <= 31; i++) {
                days.push(i)
            }
            return {
                title: 'picker-view',
                years,
                year,
                months,
                month,
                days,
                day,
                value: [9999, month - 1, day - 1],
				/**
				 * 解决动态设置indicator-style不生效的问题
				 */
                visible: true,
                // indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`
                indicatorStyle: `height: 150rpx;color:#FF6B3E;`,
				// #ifdef MP-KUAISHOU
				maskStyle: "padding:10px 0;",
				// #endif
				// #ifndef MP-KUAISHOU
				maskStyle: "",
				// #endif
				
				btnBoxWidthL: 300,
				btnBoxHeightL: 300,
				btnColorL: "#FD6D62",
				btnImgSrcL: "../../../../static/icon/my_module/healthInfo/LBack.png",
				btnTextL: "返回",
				btnTextColorL: "#ffffff",
				btnTextSizeL: 30,
				btnImgWidthL: 90,
				btnRadiusL:140,
				
				btnBoxWidthR: 300,
				btnBoxHeightR: 300,
				btnColorR: "#FD6D62",
				btnImgSrcR: "../../../../static/icon/my_module/healthInfo/RBack.png",
				btnTextR: "下一步",
				btnTextColorR: "#ffffff",
				btnTextSizeR: 30,
				btnImgWidthR: 90,
				btnRadiusR:140,
				curr:0
            }
        },
        methods: {
            bindChange (e) {
				console.log(e)
                const val = e.detail.value
				console.log(val[0])
				this.curr=val[0];
                this.year = this.years[val[0]]
                this.month = this.months[val[1]]
                this.day = this.days[val[2]]
				console.log(this.year = this.years[val[0]])
            },
			jump(index){
				let me=this;
				let data={};
				if(index==1){
					data=uni.getStorageSync("tempHealth");
					data = data ? data : {};
					data.birthyear=me.year;
					console.log(data.birthyear)
					uni.setStorageSync("tempHealth",data);
					uni.navigateTo({
						url:'../info-ill-time/info-ill-time'
					})
				}else{
					uni.navigateBack({
						delta:1
					})
				}
			}
        }
    }
</script>

<style>
	@import url("info-date.css");

</style>
